import React, { useEffect, useState } from 'react'
import { getVisitApi } from '../apis/user'
import * as echarts from 'echarts';
import "../assets/styles/home.less";

export default function Home() {
  const [visit, setVisit] = useState({})
  useEffect(() => {
    const xData = getRecentlySevenDays()
    // 获取浏览量相关
    getVisitApi().then(res => {

      setVisit(res.data)

      const yData1 = []
      const yData2 = []
      const { lastSevenUserVisitCount, lastSevenVisitCount } = res.data
      lastSevenUserVisitCount.forEach(item => {
        yData1.push(item.count)
      })
      lastSevenVisitCount.forEach(item => {
        yData2.push(item.count)
      })
      let len = yData1.length
      while (len < 7) {
        yData1.unshift(0)
        yData2.unshift(0)
        len = yData1.length
      }

      var myChart = echarts.init(document.getElementById('myChart'));
      myChart.setOption({
        title: {
          text: '近七日系统访问记录'
        },
        tooltip: {},
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            name: '您',
            type: 'bar',
            data: yData1
          },
          {
            name: '总数',
            type: 'bar',
            data: yData2
          }
        ],
        legend: {
          top: 350,
          data: ['您', '总数']
        }
      });
    })


  }, [])


  //获取最近七天的日期
  function getRecentlySevenDays() {
    const now = Date.now();//现在时刻的时间戳
    const dayMillionseconds = 24 * 60 * 60 * 1000;//每天的毫秒数
    const res = [];//最近七天的日期
    for (let i = 0; i < 7; i++) {
      const d = new Date(now - dayMillionseconds * i);
      const mon = d.getMonth() + 1;//获取月份
      const date = d.getDate();//获取号数
      res.unshift(`${mon}-${date}`);
    }

    return res;
  }
  const { avatar, deptName, roleName, username, lastLoginTime } = JSON.parse(localStorage.user)
  console.log(visit);

  return (
    <div>
      <div style={{ display: 'flex', border: '1px solid #eee', padding: '30px' }}>
        <div>
          <img src={"http://xawn.f3322.net:8002/distremote/static/avatar/" + avatar} style={{ width: 80, height: 80 }} />
        </div>
        <div style={{ margin: '0 500px 0 20px' }}>
          <div style={{ fontSize: '18px' }}>下午好，{username}，今天任务到哪里了</div>
          <div style={{ margin: '10px 0', color: '#aaa' }}>{deptName}|{roleName}</div>
          <div style={{ color: '#aaa' }}>上次登录时间：{lastLoginTime}</div>
        </div>
        <div style={{ display: 'flex', fontSize: '18px', color: '#aaa' }}>
          <div>
            <div>今日IP</div>
            <div style={{ color: 'skyblue', marginTop: '8px' }}>{visit.todayIp}</div>
          </div>
          <div style={{ margin: '0 15px' }}>
            <div>今日访问</div>
            <div style={{ color: 'skyblue', marginTop: '8px' }}>{visit.todayVisitCount}</div>
          </div>
          <div>
            <div>总访问量</div>
            <div style={{ color: 'skyblue', marginTop: '8px' }}>{visit.totalVisitCount}</div>
          </div>
        </div>
      </div>
      <div className='content' style={{display:'flex', border: '1px solid #eee',}}>
        <div style={{ marginTop: '20px' ,}}>
          <div id='myChart' style={{ width: 400, height: 400 }}></div>
        </div>
        <div className="allItem">
          <div className="itemNav">
            <span>进行的项目</span>
            <span style={{ color: 'skyblue' }}>所有项目·</span>
          </div>
          <div className="leftItem">
            <span className="ItemF" >F</span>
            <div style={{ width: 195 }}>
              <span className="red-title" style={{ color: '#59597E' }}>RedRabbit-Shiro </span> <br />

              <span className="tit" style={{ color: '#ccc' }}>sSpring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
            </div>
          </div>
          <div className="leftItem">
            <span className="ItemF" >F</span>
            <div style={{ width: 195 }}>
              <span className="red-title" style={{ color: '#59597E' }}>RedRabbit-Shiro </span> <br />
              <span className="tit" style={{ color: '#ccc' }}>sSpring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
            </div>
          </div>
          <div className="leftItem">
            <span className="ItemF" >F</span>
            <div style={{ width: 195 }}>
              <span className="red-title" style={{ color: '#59597E' }}>RedRabbit-Shiro </span> <br />
              <span className="tit" style={{ color: '#ccc' }}>sSpring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
            </div>
          </div>
          <div className="leftItem">
            <span className="ItemF" >F</span>
            <div style={{ width: 195 }}>
              <span className="red-title" style={{ color: '#59597E' }}>RedRabbit-Shiro </span> <br />
              <span className="tit" style={{ color: '#ccc' }}>sSpring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
            </div>
          </div>
          <div className="leftItem">
            <span className="ItemF" >F</span>
            <div style={{ width: 195 }}>
              <span className="red-title" style={{ color: '#59597E' }}>RedRabbit-Shiro </span> <br />
              <span className="tit" style={{ color: '#ccc' }}>sSpring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</span>
            </div>

          </div>

        </div>
      </div>
    </div>
  )
}
